<script setup>
import Home from './Home.vue'
import Post from './Post.vue'
import Archive from './Archive.vue'
import { ref } from 'vue'

const currentTab = ref('Home')
const tabs = {
    Home, Post, Archive
}
</script>

<template>
    <div class="demo">
        <button v-for="(_, tab) in tabs"
         :key="tab"
         :class="['tab-button', {active: currentTab === tab}]"
         @click="currentTab = tab">
            {{ tab }}
        </button>
        <component :is="tabs[currentTab]" class="tab"></component>
    </div>
</template>

<style scoped>
    .demo {
        font-family: sans-serif;
        border: 1px solid #eee;
        border-radius: 2px;
        padding: 20px 30px;
        margin-top: 1em;
    }
    .tab-button {
        padding: 6px 10px;
        border-top-right-radius: 3px;
        border-top-left-radius: 3px;
        border: 1px solid #ccc;
        cursor: pointer;
        background-color: #f0f0f0;
        margin-right: -1px;
        margin-bottom: -1px;
    }
    .tab-button:hover {
        background-color: #e0e0e0;
    }
    .tab-button.active {
        background-color: #e0e0e0;
    }
    .tab {
        border: 1px solid #eee;
        padding: 10px;
    }
</style>